<script type="text/javascript">
$(function(){
    var option = {
    	column : 1,
        beforeExpand : function($treeTable, id) {
            //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
            if ($('.' + id, $treeTable).length) { return; }
            $.getJSON(
           		"${BASE}/admin/sys/SysMenu/childTree",
           		{pId : id},
           		function(jsonData){
                    var html = '';
           			for(var i in jsonData){
           				
           				var ticon = jsonData[i].icon;
           				if(!ticon)
           					ticon = "";
           				html = html +'<tr id="'+jsonData[i].id + '" pId="'+id+'"';
           				if(jsonData[i].tails.isParent){
           					html = html + ' hasChild="true" ';
           				}
           				html = html + '>';
           				html = html + '<td class="text-c">'+jsonData[i].id+'</td>';
           				html = html + '<td nowrap>'+'<i class="'+ticon+'"></i>&nbsp;'+jsonData[i].name+'</td>';
           				html = html + '<td>'
           				            + '<input type="hidden" name="ids" value="'+jsonData[i].id+'"/>'
           				            + '<input name="sorts" type="text" class="input-text text-c" value="'+jsonData[i].sort+'" style="width:50px">'
           				            + '</td>';
           				html = html + '<td>'+jsonData[i].href+'</td>';
           				html = html + '<td class="text-c">';
           				if(jsonData[i].isShow){
           					html = html + '显示';
           				}else{
           					html = html + '隐藏';
           				}
           				html = html +'</td>';
           				html = html + '<td>';
           				html = html +'<a class="btn btn-info btn-xs" href="javascript:;" title="编辑" onclick="list_edit('+jsonData[i].id+')"><i class="Hui-iconfont">&#xe6df;</i> 编辑</a> ';
           				html = html +'<a class="btn btn-danger btn-xs" href="javascript:;" title="删除" onclick="list_del('+jsonData[i].id+')"><i class="Hui-iconfont">&#xe6e2;</i> 删除</a> ';
           				html = html +'<a class="btn btn-success btn-xs" href="javascript:;" onclick="list_add('+jsonData[i].id+')"><i class="Hui-iconfont">&#xe600;</i> 添加下级菜单</a>';
           				html = html +'</td></tr>';
           			}
           			$treeTable.addChilds(html);
           		}
            );
        }
    };
    $('#treeTable1').treeTable(option);
    
});
</script>
        
<div class="box">
  <div class="box-header">
    <h3 class="box-title">菜单列表</h3>
    <div class="box-tools">
      <span onclick="list_add('');" class="btn btn-info btn-sm">添加菜单项</span>
    </div>
  </div>
<form action="${BASE}/admin/sys/SysMenu/updateSort" id="form_updateSort" method="post">    
  <div class="box-body no-padding">

<table id="treeTable1" class="table table-bordered table-striped table-hover">
  <thead>
    <tr class="text-c">
      <th width="60px">ID</th>
      <th>名称</th>
      <th width="60px">排序</th>
      <th>链接</th>
      <th>可见</th>
      <th width="228px">操作</th>
    </tr>
  </thead>
  <tbody>
  <% for(var menu in menuList){ %>
    <tr id="${menu.id}" <%if(menu.isParent) {%> hasChild="true" <%}%> >
      <td class="text-c">${menu.id}</td>
      <td nowrap><i class='${menu.icon!}'></i>&nbsp;${menu.name}</td>
      <td>
	    <input type="hidden" name="ids" value="${menu.id}"/>
	    <input name="sorts" type="text" class="input-text text-c" value="${menu.sort}" style="width:50px">
      </td>
      <td>${menu.href}</td>
      <td class="text-c">${menu.isShow==1?'显示':'隐藏'}</td>
      <td class="td-manage" width="130">
	    <a class="btn btn-info btn-xs" href="javascript:;" title="编辑" onclick="list_edit('${menu.id}')"><i class="Hui-iconfont">&#xe6df;</i> 编辑</a> 
	    <a class="btn btn-danger btn-xs" href="javascript:;" title="删除" onclick="list_del('${menu.id}')"><i class="Hui-iconfont">&#xe6e2;</i> 删除</a>
	    <a class="btn btn-success btn-xs" href="javascript:;" onclick="list_add('${menu.id}')"><i class="Hui-iconfont">&#xe600;</i> 添加下级菜单</a>
      </td>
    </tr>
  <% } %>
  </tbody>
</table>

  </div>
  
  <div class="box-footer clearfix">
	<span class="l">
		<button type="submit" class="btn btn-primary"><i class="Hui-iconfont">&#xe6e2;</i> 保存排序</button>
	</span>
  </div>
</form>

</div>

<script type="text/javascript">

function list_add(pid){
	var params = "?parentId="+pid;
	HtmlRender('${BASE}/admin/sys/SysMenu/add'+params);
}
function list_edit(id,state){
    HtmlRender("${BASE}/admin/sys/SysMenu/edit",{id:id});
}
function list_del(id){
	var select_ids = "";
	if(id){
		select_ids=id;
	}else{
	    $("input[name='table_checkbox_id']:checked").each(function(){
	    	select_ids+=$(this).val()+",";   
	    });
	    if(""==select_ids){
	    	layer.msg('请先选择要删除的数据！', {icon: 3,offset: '45px'});
	    	return false;
	    }
	}
	layer.confirm('确认删除所选记录?', {icon: 3, title:'警告'}, function(index){	    
	    layer.close(index);
	    layer.load(1, {shade: [0.3,'#fff']});
	    $.post("${BASE}/admin/sys/SysMenu/delete",{ids:select_ids},function(jsondata){
			layer.closeAll('loading');
			if( jsondata.code == "001" ){
				layer.msg(jsondata.msg, {icon: 6,offset: '45px'});
				HtmlRender('${BASE}/admin/sys/SysMenu/index');
			}else{
				layer.msg(jsondata.msg, {icon: 5,offset: '45px'});
			}
	    },"json");
	});
}

$(function(){
	$("#form_updateSort").validate({
		errorPlacement: function(error, element) {
			error.appendTo(element.parent());
		},
		submitHandler : function(form) {
			layer.load(1, {shade: [0.3,'#fff']});
			$(form).ajaxSubmit({
				dataType:"json",
				success:function( jsondata ){
					layer.closeAll('loading');
					if( jsondata.code == "001" ){
						layer.msg(jsondata.msg, {icon: 6,offset: '45px'});
					}else{
						layer.msg(jsondata.msg, {icon: 5,offset: '45px'});
					}
				}
			});
		},
		rules : {
			sorts : {
				digits : true,
				min:0
			}
		}, 
		messages : { 
			sorts : { 
				digits : "只能为整数值",
				min : "最小值为0"
			}
		}
	});
});
</script>